import { FormInstance, Modal } from 'antd';
import React, { useRef } from 'react';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { RoleItem, UpdateRoleNameBean } from '../data';

interface EditFormProps {
  role: RoleItem;
  onSubmit: (values: UpdateRoleNameBean) => Promise<void>;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
  visibleHandler: (flag?: boolean) => void;
}

const EditForm: React.FC<EditFormProps> = (props) => {
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    modalVisible: updateModalVisible,
    role
  } = props;
  const formRef = useRef<FormInstance>();

  return (
    <Modal
      title="编辑角色"
      open={updateModalVisible}
      width={550}
      footer={null}
      centered
      onCancel={() => handleUpdateModalVisible(false)}
      afterClose={() => handleUpdateModalVisible(false)}
    >
      <ProForm<UpdateRoleNameBean>
        onFinish={(values) => handleUpdate(values)}
        formRef={formRef}
        layout="vertical"
      >
        <ProFormText
          width={'xl'}
          name="role_id"
          label="角色id"
          initialValue={role.id}
          hidden={true}
        />

        <ProFormText
          width={'xl'}
          name="name"
          label="角色名称"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入角色名称' }]}
          initialValue={role.name}
        />

      </ProForm>
    </Modal>
  );
};
export default EditForm;
